<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <!-- <searchBox title="入库记录" :btn="btn" @func="showBtn" /> -->
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-row class="type">
              <el-col span="3">
                <el-input
                  v-model="queryParams.materialId"
                  placeholder="耗材名称、编号"
                  clearable
                ></el-input>
              </el-col>
              <el-col span="3">
                <el-input
                  v-model="queryParams.batchNo"
                  placeholder="耗材批号"
                  clearable
                ></el-input>
              </el-col>
              <el-col span="3">
                <el-select
                  v-model="queryParams.type"
                  placeholder="选择耗材类型"
                >
                  <el-option
                    v-for="item in type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>

              <el-col span="3">
                <el-date-picker
                  v-model="queryParams.manufacturingDate"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择入库时间"
                >
                </el-date-picker>
              </el-col>

              <el-col span="3">
                <el-button @click="handleLoadAndQuery()">查询</el-button>
              </el-col>
            </el-row>

            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column
                label="入库单编号"
                align="center"
                prop="storeNo"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="耗材编号"
                align="center"
                prop="materialId"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="耗材名称"
                align="center"
                prop="materialName"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="耗材类型" align="center" prop="type">
                <template slot-scope="scope">
                  <sapn v-if="scope.row.type === 1">试剂</sapn>
                  <sapn v-if="scope.row.type === 2">质控品</sapn>
                </template>
              </el-table-column>
              <el-table-column
                label="生产厂商"
                align="center"
                prop="manufacturer"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="耗材批号"
                align="center"
                prop="batchNo"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="入库数量" align="center" prop="count" />
              <!--            <el-table-column label="生产日期" align="center" prop="manufacturingDate" />-->
              <el-table-column
                label="生产日期"
                align="center"
                prop="createTime"
              >
              </el-table-column>
              <el-table-column
                label="失效日期"
                align="center"
                prop="expirationDate"
              />
              <el-table-column
                label="入库时间"
                align="center"
                prop="manufacturingDate"
              />
              <el-table-column label="接收者" align="center" prop="receiver" />
              <el-table-column
                label="入库科室"
                align="center"
                prop="deptName"
              />
              <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
          </el-card>
          <!--          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
          <div class="pagination-container">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="handleLoadAndQuery"
            />
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { materialStoreList } from "../../../api/business/materialStore";
import { dateFormat } from "@/utils/index";

export default {
  name: "put-record",
  components: {},
  data() {
    return {
      btn: {
        putRecord: true,
        add: false,
        reg: false,
        down: false,
        export: false,
        imp: false
      },
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: "1",
      deviceInfo: {},
      type: [
        {
          value: "",
          label: "选择消息类型"
        },
        {
          value: "1",
          label: "试剂"
        },
        {
          value: "2",
          label: "质控品"
        }
      ],
      value: "",
      total: 5,
      materialNameOrNo: "",
      materialType: null,

      putRecordDate: null,
      queryParams: {
        materialId: null,
        batchNo: null,
        type: null,
        manufacturingDate: undefined,
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  watch: {},
  created() {
    this.handleLoadAndQuery();
  },
  methods: {
    handleLoadAndQuery() {
      this.loading = true;
      materialStoreList(this.queryParams).then(response => {
        this.loading = false;
        this.checkList = response.rows;
        this.total = response.total;
      });
    },
    toDeviceInfo(id) {
      // this.$router.push({path:"/device/deviceInfo/index"});
    }
  }
};
</script>

<style>
.btn {
  margin-left: 30px;
}
</style>
<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <!-- <searchBox title="入库记录" :btn="btn" @func="showBtn" /> -->
          <el-card class="gray-card no-border no-margin-top"
                   shadow="never">
            <el-row class="type">
              <el-col span="3">
                <el-input v-model="queryParams.materialId"
                          placeholder="耗材名称、编号"
                          clearable></el-input>
              </el-col>
              <el-col span="3">
                <el-input v-model="queryParams.batchNo"
                          placeholder="耗材批号"
                          clearable></el-input>
              </el-col>
              <el-col span="3">
                <el-select v-model="queryParams.type"
                           placeholder="选择耗材类型"
                           class=""
                           clearable>
                  <el-option v-for="item in type"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col span="3">
                <el-date-picker v-model="queryParams.manufacturingDate"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期">
                </el-date-picker>
              </el-col>
              <el-col span="3">
                <el-button @click="handleLoadAndQuery()"
                           class="btn">查询</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading"
                      :data="checkList"
                      style="width: 100%;">
              <el-table-column label="入库编号"
                               align="center"
                               prop="storeNo"
                               :show-overflow-tooltip="true" />
              <el-table-column label="耗材编号"
                               align="center"
                               prop="materialNo"
                               :show-overflow-tooltip="true" />
              <el-table-column label="耗材名称"
                               align="center"
                               prop="materialName"
                               :show-overflow-tooltip="true" />
              <el-table-column label="耗材类型"
                               align="center"
                               prop="type"
                               :formatter="formatType" />
              <el-table-column label="生产厂商"
                               align="center"
                               prop="manufacturer"
                               :show-overflow-tooltip="true" />
              <el-table-column label="耗材批号"
                               align="center"
                               prop="batchNo"
                               :show-overflow-tooltip="true" />
              <el-table-column label="入库数量"
                               align="center"
                               prop="count" />
              <!--            <el-table-column label="生产日期" align="center" prop="manufacturingDate" />-->
              <el-table-column label="生产日期"
                               align="center"
                               prop="manufacturingDate">
              </el-table-column>
              <el-table-column label="失效日期"
                               align="center"
                               prop="shelflife" />
              <el-table-column label="入库时间"
                               align="center"
                               prop="createTime" />
              <el-table-column label="接收者"
                               align="center"
                               prop="receiver" />
              <el-table-column label="入库科室"
                               align="center"
                               prop="deptName" />
              <el-table-column label="备注"
                               align="center"
                               prop="remark" />
            </el-table>
          </el-card>
          <!--          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
          <div class="pagination-container">
            <el-pagination v-show="total > 0"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next,jumper"
                           :current-page.sync="btn.pageNum"
                           :page-size="btn.pageSize"
                           :page-sizes="[5, 10, 20, 30, 50]"
                           :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { materialStoreList } from '../../../api/business/materialStore'
import { dateFormat } from '@/utils/index'

export default {
  name: 'put-record',
  components: {},
  data() {
    return {
      btn: {
        putRecord: true,
        add: false,
        reg: false,
        down: false,
        export: false,
        imp: false,
      },
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo: {},
      type: [],
      value: '',
      total: 5,
      materialNameOrNo: '',
      materialType: null,

      putRecordDate: null,
      queryParams: {
        materialId: null,
        batchNo: null,
        type: null,
        manufacturingDate: undefined,
        pageNum: 1,
        pageSize: 20,
      },
      type: [
        {
          value: '1',
          label: '试剂',
        },
        {
          value: '2',
          label: '质控品',
        },
      ],
      value: '',
    }
  },
  watch: {},
  created() {
    this.handleLoadAndQuery()
  },
  filters: {
    formatDate(time) {
      var date = new Date(time)
      return dateFormat(date, 'yyyy/MM/dd')
    },
  },
  methods: {
    handleLoadAndQuery() {
      this.loading = true
      materialStoreList(this.queryParams).then((response) => {
        this.loading = false
        this.checkList = response.rows
        this.total = response.total
        console.log(this.queryParams.manufacturingDate)
      })
      this.loading = true;
      console.log(this.queryParams.manufacturingDate, 0);
      materialStoreList(this.queryParams).then(response => {
        this.loading = false;
        this.checkList = response.rows;
        this.total = response.total;
      });
    },
    toDeviceInfo(id) {
      // this.$router.push({path:"/device/deviceInfo/index"});
    },

    handleCurrentChange(val) {
      this.btn.pageNum = val
      this.handleLoadAndQuery()
    },
    handleSizeChange(val) {
      this.btn.pageNum = 1
      this.btn.pageSize = val
      this.handleLoadAndQuery()
    },
    formatType(row) {
      let typeHash = {
        1: '试剂',
        2: '质控品',
      }
      return typeHash[row.type]
    },
  },
}
</script>

<style>
.btn {
  margin-left: 30px;
}
</style>
